let _Vue = null
export default class VueRouter {
  static install (Vue) { // install方法接收两个变量，一个是Vue构造方法，一个是传入的参数，这里我们先忽略传入参数的功能
    // 1. 是否已经执行过install了，若执行了就不再执行
    if (VueRouter.install.installed) {
      return
    }
    VueRouter.install.installed = true
    // 2. 保存Vue构造函数供后面创建组件时等时候使用
    _Vue = Vue
    // 3.将创建vue实例时传入的router注册到vue实例上
    // _Vue.prototype.$router = this.$options.router; // 但是这里的this不是指向的Vue实例，可以采用混合拿到vue实例
    _Vue.mixin({
      beforeCreate () {
        _Vue.prototype.$router = this.$options.router // 这里的this指的就是vue实例了
      }
    })
  }

  constructor (options) {
    this.options = options
    this.routeMap = {}
    this.data = _Vue.observable({
      current: '/'
    })
    this.init()
  }

  init () {
    this.createRouteMap()
    this.initComponents(_Vue)
    this.initEvent()
  }

  createRouteMap () {
    this.options.routes.forEach(route => {
      this.routeMap[route.path] = route.component
    })
  }

  initComponents (Vue) {
    const self = this
    Vue.component('router-link', {
      props: {
        to: String
      },
      render (h) {
        return h('a', {
          attrs: {
            href: this.to
          },
          on: {
            click: this.clickHandler
          }
        }, [this.$slots.default])
      },
      methods: {
        clickHandler (e) {
          window.location.hash = `#${this.to}`
          self.data.current = this.to
          e.preventDefault()
        }
      }
    })
    Vue.component('router-view', {
      render (h) {
        const cm = self.routeMap[self.data.current]
        return h(cm)
      }
    })
  }

  initEvent () {
    window.addEventListener('hashchange', () => {
      this.data.current = window.location.hash.substr(1)
    })
  }
}
